<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>CellSucks</title>
<link type="text/css" rel="stylesheet" href="style.css"/>
<!--<style type="text/css">
v\:* { 
behavior:url(#default#VML), 
}
</style>-->
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;&hl=en&key=ABQIAAAA615yqVJJAhNE3xs3ARCz4RRa68FjSkh_rmfJg28p6kZPcltF3hS3g7I-dxIhCmCROmpjJpYh80Q_rQ" type="text/javascript"></script>
<script type="text/javascript">

var map = null;
var center = null;
var geocoder = null;
var markerCount = null;
var rating = 0;
var carriers = new Array("Helio", "Alltel", "Sprint", "Verizon", "Cingular", "T-Mobile");

function load(){
	if(GBrowserIsCompatible){
        map = new GMap2(document.getElementById("map"));
	map.addControl(new TextualZoomControl());
	map.addControl(new GMapTypeControl());	
   	centerListener();
	map.setCenter(new GLatLng(40.729280,-73.993503), 11);
	}
	geocoder = new GClientGeocoder();
	loadMarkers();
	
	

}
	
function centerListener(){
 	GEvent.addListener(map, "moveend", function() {
	center = map.getCenter();
        document.getElementById("currentcenter").innerHTML = "Your current position is: " + center.toString();
        });

}

//Deprecated and it feels so good!
/*function markerListener(marker, address){
	GEvent.addListener(marker, "click", function() {
	marker.openInfoWindowHtml(address);
	});
}*/

function loadMarkers(){
GDownloadUrl("data.xml", function(data, responseCode) {
	var xml = GXml.parse(data);
	var markers = xml.documentElement.getElementsByTagName("marker");
	for (var i = 0; i < markers.length; i++) {
	markerCount = i;
	var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),parseFloat(markers[i].getAttribute("lng")));
	//We don't need this anymore since we are now using the map.addOverlay within createMarker
	//map.addOverlay(new GMarker(point));
	map.addOverlay(createMarker(point, i + 1));
}
	markerCount += 1;
});
}

function createMarker(point, number) {
  var marker = new GMarker(point);
  var lat = point.lat();
  var lng = point.lng();
  var infoTabs = [
	new GInfoWindowTab("Info", "Hello, I am Marker #<b>" + number + "</b>. I have been reported as being a <b>dead zone</b>."),
	new GInfoWindowTab("Geo Data", "My coordinates are:" + "<br>Latitude: " + lat + "</br>" + "<br>Longitude: " + lng + "</br>"),
	new GInfoWindowTab("Carrier Info", carriers[0] + "<br/>" + carriers[1] + "<br/>" + carriers[2]+ "<br/>" + carriers[3]+ "<br/>" + carriers[4]+ "<br/>" + carriers[5]),
	new GInfoWindowTab("Rate", "I have <b>" + rating + "</b>" + " confirmations." + "<br><input type='button' value='Love It' onClick='loveIt(marker, numer)'/></br><br><input type='button' value='Hate It' onClick='hateIt(marker, number)'/></br>")
];
  GEvent.addListener(marker, "click", function() {
  marker.openInfoWindowTabsHtml(infoTabs);	
  });
  return marker;
}
	

function setMarker(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert("The GeoCoder did not understand your address.  Please make sure you enter a valid US or Canadian address.");
            } else {
              map.setCenter(point);
              var marker = new GMarker(point);
	      //markerListener is dead since we moved that functionality to createMarker
	      //markerListener(marker, address);
	      //We don't need this anymore since we are now using the map.addOverlay within createMarker
	      //map.addOverlay(marker);
	      map.addOverlay(createMarker(point, markerCount + 1));
	      markerCount += 1;
            }
          }
        );
      }
     }

function loveIt(marker, number){
	marker.number.rating += 1;
}

function hateIt(marker, number){
	marker.number.rating -= 1;
}


//This should be in it's own .js
function TextualZoomControl() {
}

TextualZoomControl.prototype = new GControl();

TextualZoomControl.prototype.initialize = function(map) {
  	var container = document.createElement("div");

  	var zoomInDiv = document.createElement("div");
	this.setButtonStyle_(zoomInDiv);
  	container.appendChild(zoomInDiv);
  	zoomInDiv.appendChild(document.createTextNode("Zoom In"));
  	GEvent.addDomListener(zoomInDiv, "click", function() {
    	map.zoomIn();
  	});

  	var zoomOutDiv = document.createElement("div");
  	this.setButtonStyle_(zoomOutDiv);
  	container.appendChild(zoomOutDiv);
  	zoomOutDiv.appendChild(document.createTextNode("Zoom Out"));
  	GEvent.addDomListener(zoomOutDiv, "click", function() {
    	map.zoomOut();
  	});

  	map.getContainer().appendChild(container);
  	return container;
	}

TextualZoomControl.prototype.getDefaultPosition = function() {
  	return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
	}

TextualZoomControl.prototype.setButtonStyle_ = function(button) {
  	button.style.textDecoration = "none";
  	button.style.color = "#0000cc";
  	button.style.backgroundColor = "white";
  	button.style.font = "small Arial";
  	button.style.border = "1px solid black";
  	button.style.padding = "2px";
  	button.style.marginBottom = "3px";
  	button.style.textAlign = "center";
  	button.style.width = "6em";
  	button.style.cursor = "crosshair";
}

 </script>
  </head>
  <body onload="load()" onunload="GUnload()">
        <h1>Welcome to CellSucks</h1>
	<form action="#" onsubmit="setMarker(this.address.value); return false">
      	<p>
        <input type="text" size="30" name="address" value="Where does it hurt?"/>
        <input type="submit" value="Submit" />
      	</p>
	</form>
	<div id="map"></div>
	<p>
	<div id="currentcenter"></div>
	</p>
	<div id="footer">An <a href="http://itp.nyu.edu">ITP</a> Concoction.</div>
  </body>
</html>
